import React, {PureComponent} from "react";
import {Icon, Layout, Menu} from "antd";
import {Link, withRouter} from "react-router-dom";
import routes from "../../app/routes";
import styles from "./index.module.less";
import lodash from 'lodash';

const {Sider} = Layout;

class SiderMenu extends PureComponent {
    getMenuItems = (routes, permissions, isAdmin) =>
        routes.map(
            route => {
                // console.info('route', route);
                let routes = [];
                routes.push(route.title);
                let currentRoute = route;
                for (let i = 0; i < 10; i++) {
                    if(route.parent !== undefined){
                        currentRoute = route.parent;
                        if(routes.indexOf(currentRoute.title) < 0){
                            routes.push(currentRoute.title);
                        }
                    }else{
                        break;
                    }
                }
                lodash.reverse(routes);
                var title = lodash.join(routes, "-");
                // console.info('title', title);
                const hasPermissions = isAdmin || permissions.indexOf(title) >= 0;
                return route.children && hasPermissions ? (
                    <Menu.SubMenu
                        key={route.path}
                        title={
                            <span>
                <Icon type={route.icon}/>
                <span>{route.title}</span>
              </span>
                        }
                    >
                        {this.getMenuItems(route.children, permissions, isAdmin)}
                    </Menu.SubMenu>
                ) : route.path && !route.hideOnMenu && hasPermissions ? (
                    <Menu.Item key={route.path}>
                        <Link to={route.path}>
                            {route.icon && <Icon type={route.icon}/>}
                            <span>{route.title}</span>
                        </Link>
                    </Menu.Item>
                ) : null
            }
        );

    render() {
        const {
            collapsed,
            onCollapse,
            logo,
            routeParams: {selectedRoutes = []},
            principal
        } = this.props;

        const selectedPaths = selectedRoutes.map(item => item.path);
        const selectedKeys = selectedPaths.slice(-1);
        const openedKeys = selectedPaths.slice(0, -1);
        const permissions = principal.permissions;
        const isAdmin = principal.admin;
        return (
            <Sider
                trigger={null}
                collapsible
                collapsed={collapsed}
                breakpoint="lg"
                onCollapse={onCollapse}
                width={256}
                className={styles.sider}
            >
                <div className={styles.logo} key="logo">
                    <Link to="/">
                        <img src={logo} alt="logo"/>
                        {/*<h1>星达国际</h1>*/}
                    </Link>
                </div>
                <Menu
                    key="Menu"
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={selectedKeys}
                    defaultOpenKeys={openedKeys}
                    style={{
                        padding: "16px 0",
                        width: "100%"
                    }}
                >
                    {this.getMenuItems(routes, permissions, isAdmin)}
                </Menu>
            </Sider>
        );
    }
}

export default withRouter(SiderMenu);
